<template>
  <div>
    <p>
      <a-card
        @click="showDrawer"
        class="CardImgX"
        hoverable
        style="width: 210px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/d.png.png" />
        </template>
        <getCurrentTime></getCurrentTime>
        <p><item></item></p>
        <a-card-meta title="a.png.png"> </a-card-meta>
      </a-card>
    </p>
    <a-drawer
      v-model:visible="visible"
      class="custom-class"
      style="color: #000"
      width="600px"
      title="
文件信息"
      placement="right"
      @after-visible-change="afterVisibleChange"
    >
      <p><img alt="example" class="X" src="../../assets/d.png.png" /></p>
      <p>文件名称:d.png.png</p>
      <p>存储路径: / ../../assets/d.png.png</p>
      <p><item></item></p>
      <p>
        访问链接:<span
          ><a-textarea
            @click="success"
            style="width: 400px"
            v-model:value="value2"
            placeholder="https://bwcreation.oss-cn-beijing.aliyuncs.com/2022-03-05/(pid-45053830)Alice%20in%20NY.jpg"
            allow-clear
        /></span>
      </p>
      <p><a href="#">复制</a></p>
    </a-drawer>
  </div>
</template>


<script>
import { message } from "ant-design-vue";
import item from "../../components/getCurrentTime/index.vue";
import { defineComponent, ref } from "vue";
export default {
  data() {
    return {};
  },
  beforeCreate() {},
  setup() {
    const visible = ref(false);

    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    const showDrawer = () => {
      visible.value = true;
    };

    return {
      visible,
      afterVisibleChange,
      showDrawer,
    };
  },
  created() {},
  methods: {
    success() {
      message.success("内容已复制到剪切板");
    },
  },
  components: {
    item,
  },
};
</script>

<style>
.X {
  width: 500px;
  height: 300px;
}
</style>